<template>
   <div class="markdown-body">
     <DetailHeader></DetailHeader>
<!--    <div class="context" v-html="compiledMarkdown"></div>-->
     <VueMarkdown :source="this.$store.state.article.content"></VueMarkdown>
    <!-- 个人 -->
    <ArticleFooter></ArticleFooter>
  </div>
</template>

<script>
import DetailHeader from "./DetailHeader.vue"
import ArticleFooter from "./ArticleFooter.vue"
import 'highlight.js/styles/github.css'
// 其他元素使用 github 的样式
import 'github-markdown-css'
// import { marked } from "marked";
import VueMarkdown from 'vue-markdown'
export default {
     name:"Detail",
     components: {
    DetailHeader,ArticleFooter,VueMarkdown
  },


    
  }



</script>

<style>
.markdown-body{
    margin-top: 11px;
    flex-basis:765px ;
    /* border: 1px solid blue; */
    height: fit-content;
    margin-right: 20px;
    /* border: 1px solid rgb(0, 0, 0,0.2); */
    padding: 20px;
}
.markdown-body pre{
    background-color: #282c34;
    color: #9fb2bf;
    border-radius:0 ;
}
.markdown-body h2{
    border-bottom: none;
}


</style>